<template>
  <a-card :bordered="false">
    <!--状态选择框-->
    <div class="table-page-search-wrapper">
      <a-form :form="form" layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select placeholder="状态" :defaultValue="selectValues[0].value" @change="handleSelect">
                <a-select-option v-for="data in selectValues" :key="data.key" :value="data.value">
                  {{ data.value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider></a-divider>
    <a-table
      ref="table"
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="hospitals"
      :pagination="pagination"
      :loading="loading"
    >
      <template slot="operation" slot-scope="text, record">
        <a href="javascript:;" @click="showDrawer(record.id)">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-popconfirm
          v-if="hospitals.length"
          title="已审核医院表单信息，并确认通过?"
          @confirm="() => onPass(record)"
        >
          <a href="javascript:;">通过</a>
        </a-popconfirm>&nbsp;&nbsp;&nbsp;&nbsp;
        <a-popconfirm
          v-if="hospitals.length"
          title="已审核医院表单信息，并确认作废?"
          @confirm="() => onInvalid(record)"
        >
          <a href="javascript:;">作废</a>
        </a-popconfirm>
      </template>
    </a-table>
    <approval-detail ref="approvalDetail" @submit="submitCallBack"/>
  </a-card>
</template>

<script>

import { getApprovals, toVoidApproval, toPass } from '@/api/VolunteerApproval'
import Notification from '@/utils/notification'
import approvalDetail from './ApprovalDetail'
import moment from 'moment'

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
}

// (text, record, index) => `${index + 1}`
const columns = [
  {
    title: '编号',
    width: '180px',
    customRender: (text, record, index) => `${index + 1}`
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime',
    width: '180px',
    scopedSlots: { customRender: 'createdTime' },
    customRender: formatterTime
  },
  {
    title: '医院名称',
    dataIndex: 'hospital.name',
    width: '200px',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '医院所在城市',
    dataIndex: 'hospital.detailedAddress',
    scopedSlots: { customRender: 'detailedAddress' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '150px',
    scopedSlots: { customRender: 'operation' }
  }
]

const selectValues = [
  {
    value: '未审核',
    key: 0
  },
  {
    value: '通过',
    key: 1
  },
  {
    value: '作废',
    key: 2
  }
]

export default {
  name: 'TableList',
  components: {
    approvalDetail
  },
  data () {
    return {
      selectValues: selectValues,
      queryParam: { status: 0 },
      columns: columns,
      visible: false,
      status: 0,
      pagination: {},
      loading: false,
      hospitals: [],
      form: this.$form.createForm(this),
      notification: new Notification(this.$notification),
      Indexnumber: 0
    }
  },
  created () {},
  mounted () {
    this.fetchData(selectValues[0].key)
  },
  filters: {
    formatDate: function (date) {
      if (!date) {
        return '---'
      }
      return formatterTime(date).format('YYYY-MM-DD dddd') // 使用 dayjs 格式化时间
    }
  },
  methods: {
    handleSelect (value) {
      var Indexnumber
      selectValues.map(function (item) {
        if (item['value'] === value) {
          Indexnumber = item['key']
        }
      })
      this.Indexnumber = Indexnumber
      console.log('输出:', this.Indexnumber)
      this.fetchData(this.Indexnumber)
    },
    onInvalid (record) {
      console.log('onInvalid', record)
      const promise = toVoidApproval(record.id)
      promise.then(res => {
        this.fetchData(this.Indexnumber)
        this.notification.success('作废成功')
      }).catch(err => {
        console.log('err', err)
        this.notification.error('作废失败，此信息不是未审核状态或服务器异常')
      })
    },
    onPass (record) {
      console.log('onPass', record)
      const promise = toPass(record.id)
      promise.then(res => {
        this.fetchData(this.Indexnumber)
        this.notification.success('审批通过')
      }).catch(err => {
        console.log('err', err)
        this.notification.error('审批失败,此信息不是未审核状态或服务器异常')
      })
    },
    fetchData (params) {
      var promise = getApprovals({ status: params })
      this.loading = true
      promise.then(response => {
        console.log('fetchData:', response)
        this.pagination = response.pagination
        this.hospitals = response.data
        this.loading = false
      }).catch(context => {
        this.loading = false
        this.notification.httpError(`加载医院审核列表数据！`, context.response)
      })
    },
    handleTableChange () {},
    showDrawer (record) {
      console.log('showDrawer', record)
      this.$refs.approvalDetail.openDrawer(record)
    },
    submitCallBack (tenant) {
      console.log('submitCallBack', tenant)
      this.fetchData(this.Indexnumber)
    }
  }
}
</script>
